<template>
    <div class="content">
        <div class="top">
            <ul>
                <li>
                    <SelectIpt :lists="state" ref="state">
                        <p>状态</p>
                    </SelectIpt>
                </li>
                <li>
                    <SelectIpt :lists="type" ref="type">
                        <p>住户类型</p>
                    </SelectIpt>
                </li>
                <li>
                    <SelectIpt :lists="cardType" ref="cardType">
                        <p>证件类型</p>
                    </SelectIpt>
                </li>
                <li>
                    <TextIpt ref="cardNum">
                        <p>证件号</p>
                    </TextIpt>
                </li>
                <li>
                    <TextIpt ref="owner">
                        <p>姓名</p>
                    </TextIpt>
                </li>
                <li>
                    <TextIpt ref="phone">
                        <p>手机号</p>
                    </TextIpt>
                </li>
            </ul>
            <div class="btn">
                <GreenBtn @click.native="search">查询</GreenBtn>
                <BlueBtn>一键重置</BlueBtn>
            </div>
        </div>
        <div class="table">
            <el-table :data="filterTable.slice(pages, pages + 8)" border style="width: 100%">
                <el-table-column type="index" width="50">
                </el-table-column>
                <el-table-column v-for="column in tableColumns" :key="column.prop" :label="column.label"
                    :width="column.width || null">
                    <template slot-scope="scope">
                        {{ scope.row[column.prop] }}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">{{ scope.row.State == '待审核'
                            ?
                            '审核' : '详情' }}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <div class="total-page">
                    <p>共<span>{{ Math.ceil(filterTable.length / 8) }}</span>页/<span>{{ filterTable.length }}</span>条数据
                    </p>
                </div>
                <el-pagination background layout="prev, pager, next,jumper" @current-change="getPage" :page-size=8
                    :total="filterTable.length"  hide-on-single-page>
                </el-pagination>
            </div>
        </div>
        <el-dialog title="查看/编辑" :visible.sync="dialogFormVisible" class="dialog" width="40%"
            :before-close="handleClose">
            <el-form :model="form" label-width="80px" :inline="true" ref="form">
                <el-form-item label="姓名">
                    <el-input disabled v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input disabled v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="证件类型">
                    <el-input disabled v-model="form.cardType"></el-input>
                </el-form-item>
                <el-form-item label="证件号">
                    <el-input disabled v-model="form.cardID"></el-input>
                </el-form-item>
                <el-form-item label="住户类型">
                    <el-input disabled v-model="form.ownerType"></el-input>
                </el-form-item>
                <el-form-item label="审核状态" class="option" :rules="{ required: true, message: '请选择审核状态' }" prop="state"
                    v-if="isEdit">
                    <el-radio-group v-model="form.state">
                        <el-radio label="通过"></el-radio>
                        <el-radio label="拒绝"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="拒绝原因" class="option" v-if="isShow && isEdit"
                    :rules="{ required: true, message: '请选择拒绝原因' }" prop="resource">
                    <el-radio-group v-model="form.resource">
                        <el-radio label="非本房间住户"></el-radio>
                        <el-radio label="身份信息不匹配,请核实"></el-radio>
                        <el-radio label="其他"> </el-radio>
                    </el-radio-group>
                    <el-input v-model="form.resourceTxt" class="other" placeholder="请输入原因" :disabled="isIpt"></el-input>
                </el-form-item>
                <el-form-item label="审核状态" class="option" v-if="!isEdit">
                    <span>{{ approvalStatus }}</span>
                </el-form-item>
                <el-form-item label="拒绝原因" class="option" v-if="isEdit">
                    <span>{{ reason }}</span>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="onSubmit('form')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import BlueBtn from '@/components/BlueBtn.vue';
import TextIpt from '@/components/TextIpt.vue';
import SelectIpt from '@/components/SelectIpt.vue';
import GreenBtn from '@/components/GreenBtn.vue';

export default {
    components: {
        TextIpt,
        SelectIpt,
        BlueBtn,
        GreenBtn
    },
    watch: {
        'form.state'(val) {
            if (val == "通过") {
                this.isShow = false
            } else {
                this.isShow = true
            }
        },
        'form.resource'(val) {
            if (val == "其他") {
                this.isIpt = false
            } else {
                this.isIpt = true
            }
        }
    },
    data() {
        return {
            //过滤数据
            filterTable: [],
            //审核状态
            approvalStatus: '',
            //拒绝理由
            reason: "",
            //判断是查看还是编辑
            isEdit: true,
            //其他输入框
            isIpt: true,
            //拒绝原因
            isShow: false,
            //弹框
            dialogFormVisible: false,
            form: {
                name: '',
                phone: '',
                cardType: '',
                cardID: '',
                ownerType: '',
                state: '',
                resource: '',
                resourceTxt: '',
                rowId: ''
            },
            //修改的下标
            index: 0,
            //page
            pages: 0,
            //状态
            state: ["待审核", '已通过', '已拒绝'],
            //住户类型
            type: ['业主', '租客'],
            //证件类型
            cardType: ['身份证', '护照'],
            tableColumns: [
                // { prop: 'ID', label: '序号', width: 80 },
                { prop: 'Owner', label: '姓名', width: 100 },
                { prop: 'OwnerType', label: '类型', width: 80 },
                { prop: 'CardType', label: '证件类型', width: 150 },
                { prop: 'CardNum', label: '证件号', width: 250 },
                { prop: 'Phone', label: '手机号', width: 180 },
                { prop: 'BuildingName', label: '楼栋', width: 100 },
                { prop: 'UnitName', label: '单元', width: 150 },
                { prop: 'FloorNumber', label: '楼层', width: 150 },
                { prop: 'RoomNumber', label: '房屋号', width: 100 },
                { prop: 'AddDate', label: '申请时间', width: 150 },
                { prop: 'State', label: '状态', width: 150 },

            ],
            tableData: []
        }
    },
    methods: {
        //点击查询
        search() {
            const serach = {}
            if (this.$refs.state.value) {
                serach.State = this.$refs.state.value
            }
            if (this.$refs.type.value) {
                serach.OwnerType = this.$refs.type.value
            }
            if (this.$refs.cardType.value) {
                serach.CardType = this.$refs.cardType.value
            }

            if (this.$refs.cardNum.input) {
                serach.CardNum = this.$refs.cardNum.input
            }
            if (this.$refs.owner.input) {
                serach.Owner = this.$refs.owner.input
            }
            if (this.$refs.phone.input) {
                serach.Phone = this.$refs.phone.input
            }
            this.filterTable = this.tableData.filter(item => {
                // 检查Status是否匹配
                if (serach.State && item.State != serach.State) {
                    return false; // 如果不匹配，则排除该房间
                }
                if (serach.OwnerType && item.OwnerType !== serach.OwnerType) {
                    return false; // 如果不匹配，则排除该房间
                }
                if (serach.CardType && item.CardType !== serach.CardType) {
                    return false; // 如果不匹配，则排除该房间
                }

                if (serach.Owner && !item.Owner.includes(serach.Owner)) {
                    return false; // 如果不匹配，则排除该房间
                }
                if (serach.CardNum && !item.CardNum.includes(serach.CardNum)) {
                    return false; // 如果不匹配，则排除该房间
                }

                if (serach.Phone && !item.Phone.includes(serach.Phone)) {
                    return false; // 如果不匹配，则排除该房间
                }
                // 如果所有条件都匹配或为空（表示用户没有为该字段指定筛选条件），则返回true以包含该房间
                return true;

            })
            console.log(this.filterTable);



        },
        //关闭
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.dialogFormVisible = false
                })
                .catch(_ => { });
        },
        //提交表单
        onSubmit(formName) {
            if (this.isEdit) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log(this.index,88888);
                        
                        if (this.form.state == "通过") {
                            this.filterTable[this.index].State = "已通过"
                        } else {
                            this.filterTable[this.index].State = "已拒绝"
                        }
                        this.editConfrim()
                    } else {
                        return false;
                    }
                });
            } else {
                this.dialogFormVisible = false
            }

        },
        //修改状态
        editConfrim() {
            fetch('http://127.0.0.1/user/confirmEdit', {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                },
                body: JSON.stringify({
                    str:this.filterTable[this.index].State,
                    id: this.form.rowId,
                    resource: this.form.resource,
                    remark: this.form.resourceTxt,
                    addMan: localStorage.getItem('name')
                })
            }).then(res => res.json()).then(res1 => {
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
                this.dialogFormVisible = false
            }).catch(err => {
                console.log(err)
            })
        },
        //get 当前页
        getPage(page) {
            this.pages = 8 * (page - 1)
        },
        handleEdit(index, row) {
            this.form.state = ''
            this.form.resource = ''
            this.form.resourceTxt = ''
            this.form.name = row.Owner
            this.form.phone = row.Phone
            this.form.cardType = row.CardType
            this.form.cardID = row.CardNum
            this.form.ownerType = row.OwnerType
            this.form.rowId = row.ID
            this.reason = row.Remark
            this.approvalStatus = row.State
            this.index = index + this.pages
            if (row.State != "待审核") {
                this.isEdit = false
            } else {
                this.isEdit = true
            }
            this.dialogFormVisible = true
        },
        handleDelete(index, row) {
            console.log(index, row);
        }
    },
    mounted() {
        fetch('http://127.0.0.1/user/confirm', {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('token')}`,
                'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
            }
        }).then(res => res.json()).then(res1 => {
            this.tableData = res1
            this.filterTable = res1
        }).catch(err => {
            console.log(err);
        })
    }
}
</script>

<style scoped>
.btn >>> button{
    line-height: 30px;
}
.el-radio {
    margin-right: 15px;
}

.other {
    position: absolute;
    bottom: 0;
    right: -366px;

}

.other>>>input {
    height: 30px;
    width: 200px !important;
    border-color: #DCDFE6;
}

.option {
    display: block;
}

.dialog>>>input {
    width: 263px;
}

.el-table {
    min-height: 500px;
}

.page {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 20px;
}

.page>>>button {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    background: #fff !important;
}

.page>>>.active {
    border-color: rgba(26, 135, 254, 1) !important;
    background-color: rgba(26, 135, 254, 1) !important;
    color: #fff !important;
}

.page>>>.el-pager li {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    font-size: 12px;
    color: #999;
    font-weight: normal !important;
    background: #fff;
}

.total-page span {
    color: #FF3C2C;
}

.total-page {
    font-size: 12px;
    color: #666;
}

.table>>>.cell {
    text-align: center;
}

.table {
    padding: 20px 20px 50px;
    background: #fff;
    border-radius: 4px;
    margin-top: 10px;
}

.top p {
    white-space: nowrap;
    font-size: 13px;
    color: #666;
}

.top {
    background: #fff;
    padding: 20px 35px;
    border-radius: 4px;
}

.top li {
    margin-right: 50px;
    margin-bottom: 20px;
}

.top ul {
    display: flex;
}
</style>